import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Image, Radio, Cascader } from "antd";
import { classify, getClassifyListCode } from "./service";
import { DynamicFormItem } from "@/components/DynamicForm";
import { getArray, arrayToObject } from "phinney-toolkit";

// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const goodsTypeList = [
		{ label: "热门兑换", value: 1 },
		{ label: "福利社", value: 2 },
		{ label: "新人商品", value: 3 },
		{ label: "游戏兑换", value: 5 },
	];

	const statusList = [
		{ label: "启用", value: 1 },
		{ label: "禁用", value: 2 },
		{
			label: "删除",
			value: -1,
		},
	];
	const showStatus = [
		{ label: "是", value: 1 },
		{ label: "否", value: 0 },
	];
	let [classifyList, setClassifyList] = useState<any>([]);
	let [classifyCode, setClassifyCode] = useState<any>([]);

	const getClassifyList = async () => {
		const res = await classify({
			classifyType: 0,
		});
		setClassifyList(res.data);
	};

	const getClassifyCode = async () => {
		const res = await getClassifyListCode({
			classifyId: 156,
		});

		!isUnMounted &&
			setClassifyCode(
				getArray(res?.data.records).map((item) => ({
					label: item?.propsName,
					value: item?.propsCode,
				}))
			);
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "分类名称",
			dataIndex: "goodsClassifyName",
			search: false,
		},
		{
			title: "商品编号",
			dataIndex: "goodsCode",
			hideInTable: true,
			search: false,
		},
		// {
		// 	title: "商品分类",
		// 	dataIndex: "goodsClassifyCode",
		// 	hideInTable: true,
		// 	render: (_, record: any) => {
		// 		return (
		// 			<div>
		// 				<Cascader
		// 					defaultValue={[record.classifyName] || ""}
		// 					options={classifyList}
		// 					fieldNames={{
		// 						label: "classifyName",
		// 						value: "id",
		// 						children: "list",
		// 					}}
		// 					// onChange={(item) => {
		// 					// 	form.setFieldsValue({
		// 					// 		classifyId: item[item.length - 1],
		// 					// 	});
		// 					// }}
		// 					placeholder="请选择类别~"
		// 				/>
		// 			</div>
		// 		);
		// 	},
		// },
		{
			title: "环保币",
			dataIndex: "goodsCostCoin",
			search: false,
		},
		{
			title: "能量币",
			dataIndex: "goodsCostEnergy",
			search: false,
		},
		{
			title: "物品描述",
			dataIndex: "goodsDesc",
			search: false,
		},
		{
			title: "物品图片",
			dataIndex: "goodsIcon",
			search: false,
			render: (_, record: any) => {
				if (record.goodsIcon) {
					return (
						<Image.PreviewGroup>
							<Image
								src={record.goodsIcon}
								style={{ padding: 8 }}
								width={50}
								alt=""
							/>
						</Image.PreviewGroup>
					);
				} else {
					return <div>-</div>;
				}
			},
		},
		{
			title: "物品名称",
			dataIndex: "goodsName",
			search: false,
		},
		{
			title: "商品原价(元)",
			dataIndex: "goodsOriginPrice",
			search: false,
			render: (_, record: any) => {
				return record.goodsOriginPrice / 100;
			},
		},

		{
			title: "商品价格(元)",
			dataIndex: "goodsPrice",
			search: false,
			render: (_, record: any) => {
				return record.goodsPrice / 100;
			},
		},
		{
			title: "商品类型",
			dataIndex: "goodsType",
			valueEnum: {
				1: "热门兑换",
				2: "福利社",
				3: "新人商品",
				5: "游戏兑换",
			},
		},
		{
			title: "物品单位",
			dataIndex: "goodsUnit",
			search: false,
		},
		{
			title: "物品库存",
			dataIndex: "stock",
			search: false,
		},
		{
			title: "状态",
			dataIndex: "status",
			search: false,
			valueEnum: {
				1: "启用",
				2: "禁用",
			},
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "custom",
				label: "分类名称",
				name: "classifyId",
				required: true,
				render: (form: any, record: any) => {
					return (
						<div>
							<Cascader
								defaultValue={[record.goodsClassifyName] || ""}
								options={classifyList}
								fieldNames={{
									label: "classifyName",
									value: "id",
									children: "list",
								}}
								onChange={(item) => {
									form.setFieldsValue({
										classifyId: item[item.length - 1],
									});
								}}
								placeholder="请选择类别~"
							/>
						</div>
					);
				},
			},
			{
				type: "text",
				label: "商品名称",
				name: "goodsName",
				required: true,
			},
			{
				type: "text",
				label: "小标题",
				name: "goodsTitle",
				required: false,
			},
			{
				type: "text",
				label: "商品描述",
				name: "goodsDesc",
				required: true,
			},
			{
				type: "upload",
				label: "商品图片",
				name: "goodsIcon",
				fieldProps: {
					limit: 1,
				},
				required: true,
			},
			{
				type: "upload",
				label: "小图标",
				name: "goodsMiniIcon",
				fieldProps: {
					limit: 1,
				},
				required: false,
			},
			{
				type: "number",
				label: "商品原价",
				name: "goodsOriginPrice",
				required: true,
			},
			{
				type: "number",
				label: "商品价格",
				name: "goodsPrice",
				required: true,
			},
			{
				type: "text",
				label: "商品单位",
				name: "goodsUnit",
				required: true,
			},
			{
				type: "select",
				label: "商品类型",
				name: "goodsType",
				options: goodsTypeList,
				required: true,
			},
			{
				type: "number",
				label: "商品库存",
				name: "stock",
				required: true,
			},
			{
				type: "number",
				label: "环保币",
				name: "goodsCostCoin",
				required: true,
			},
			{
				type: "number",
				label: "能量币",
				name: "goodsCostEnergy",
				required: true,
			},
			{
				type: "custom",
				label: "状态",
				name: "status",
				required: true,
				render: (form: any, record: any) => {
					return (
						<Radio.Group
							options={statusList}
							defaultValue={record.status}
							onChange={({ target }) => {
								form?.setFieldsValue({ status: target?.value });
							}}
						></Radio.Group>
					);
				},
			},
			{
				type: "custom",
				label: "在游戏中显示",
				name: "gameShowStatus",
				required: true,
				render: (form: any, record: any) => {
					return (
						<Radio.Group
							options={showStatus}
							defaultValue={record.gameShowStatus}
							onChange={({ target }) => {
								form?.setFieldsValue({ gameShowStatus: target?.value });
							}}
						></Radio.Group>
					);
				},
			},

			{
				type: "select",
				label: "兑换道具",
				name: "goodsCostPropsCode",
				required: false,
				options: classifyCode,
			},
			{
				type: "text",
				label: "兑换道具数量",
				name: "goodsCostPropsNums",
				required: false,
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "goodsCode",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/goods/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
					goodsType: params.goodsType ? params.goodsType : 1,
				};
			},
		},
		addProps: {
			url: "/goods/add",
			modalProps: {
				formProps: {
					labelCol: { span: 7 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.goodsIcon = (
					params?.goodsIcon?.map((item: any) => item.url) || []
				).join(",");
				params.goodsMiniIcon = (
					params?.goodsMiniIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
					goodsPrice: (Number(params.goodsPrice) * 100).toFixed(0),
					goodsOriginPrice: (Number(params.goodsOriginPrice) * 100).toFixed(0),
					goodsType: params.goodsType,
				};
			},
		},
		updateProps: {
			url: "/goods/edit",
			method: "POST",
			modalProps: {
				formProps: {
					labelCol: { span: 7 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
				formValuesHandle: async (record: any) => {
					return {
						...record,
						goodsIcon: record.goodsIcon
							? [
									{
										uid: "-1",
										status: "done",
										name: record.goodsIcon,
										url: record.goodsIcon,
									},
							  ]
							: [],

						goodsMiniIcon: record.goodsMiniIcon
							? [
									{
										uid: "-1",
										status: "done",
										name: record.goodsMiniIcon,
										url: record.goodsMiniIcon,
									},
							  ]
							: [],
						goodsPrice: record.goodsPrice / 100,
						goodsOriginPrice: record.goodsOriginPrice / 100,
					};
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.goodsIcon = (
					params?.goodsIcon?.map((item: any) => item.url) || []
				).join(",");

				params.goodsMiniIcon = (
					params?.goodsMiniIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
					goodsPrice: (Number(params.goodsPrice) * 100).toFixed(0),
					goodsOriginPrice: (Number(params.goodsOriginPrice) * 100).toFixed(0),
					goodsType: params.goodsType,
				};
			},
		},
		deleteProps: {
			url: "/goods/del",
			method: "POST",
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getClassifyList();
		getClassifyCode();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
